<template>
  <div>
    <!--充值卡充值-->
    <div class="wrapper">
      <div class="title">请输入充值卡密码</div>
      <div class="ipt">
        <input v-model="password" type="number" focus>
      </div>
      <button class="recharge" @click="recharge">立即充值</button>
    </div>
    <!--充值失败-->
    <div class="dialog" v-if="showError">
      <div class="dialog_fail">
        <img class="icon" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/icon_dis@2x.png">
        <div class="tip1">充值失败</div>
        <div class="tip2">{{errorMsg}}</div>
        <div class="dialog_footer foot" style="padding-top: 60rpx">
          <button class="leftbtn" style="width: 480rpx" @click="showError = false">好的</button>
        </div>
      </div>
    </div>
    <!--充值成功-->
    <div class="success" v-if="showSuccess">
      <div class="success-main">
        <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/suc.png" class="success-img">
        <p class="tip3">￥{{payAmount}}</p>
        <p class="tip4">充值成功</p>
        <ul class="list">
          <li>
            <div class="label">充值金额</div>
            <div class="num">{{payAmount}}元</div>
          </li>
          <li>
            <div class="label">充值时间</div>
            <div class="num">{{payTime}}</div>
          </li>
        </ul>
        <button class="recharge ok" @click="back">好的</button>
      </div>
    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {

    data() {
      return {
        password: '',
        showError: false,
        showSuccess: false,
        payAmount: '',
        payTime: '',
        errorMsg: ''
      }
    },
    onUnload() {
      Object.assign(this.$data, this.$options.data())
    },
    onLoad(options) {

    },

    methods: {
      back() {
        wx.navigateBack({ changed: true })
      },
      recharge() {
        let params = {
          password: this.password,
          noLoading: true
        }
        wx.showLoading({
          title: '正在充值...'
        })
        Service.micardPay(params)
          .then((res) => {
            if (res.code == 200) {
              this.payAmount = res.data.payAmount
              this.payTime = res.data.payTime
              this.showSuccess = true
              wx.setNavigationBarTitle({
                title: '充值结果'
              })
            }else {
              this.errorMsg = res.message
              this.showError = true
            }
          })
      },
    }
  }
</script>

<style scoped>
  .wrapper {
    padding: 50px;
    background: #fff;
  }
  .title{
    padding-top: 4px;
    padding-bottom: 44px;
    font-size:30px;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:42px;
  }
  .ipt{
    padding: 20px 0;
    border-bottom: 2px solid #DDDDDD;
  }
  input{
    height: 48px;
    font-size:34px;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:48px;
  }
  .recharge{
    margin-top: 110px;
    width:650px;
    height:90px;
    background:rgba(254,209,48,1);
    border-radius:45px;
    font-size:30px;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height:90px;
  }
  .ok{
    margin-top: 50px;
    width: 590px;
  }
  .dialog_fail{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    width:590px;
    height:547px;
    background:rgba(255,255,255,1);
    border-radius:10px;
    padding: 70px 55px 50px 55px;
    box-sizing: border-box;
    text-align: center;
  }
  .icon{
    width: 120px;
    height: 120px;
  }
  .tip1{
    padding-top: 30px;
    font-size:46px;
    color:rgba(51,51,51,1);
    line-height:65px;
  }
  .tip2{
    padding-top: 20px;
    font-size:30px;
    color:rgba(102,102,102,1);
    line-height:42px;
  }
  .success{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: #F2F2F2;
    padding: 30px;
    z-index: 999;
  }
  .success-main{
    width:100%;
    padding: 90px 50px 80px;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 16px 0px rgba(0,0,0,0.1);
    border-radius:20px;
    box-sizing: border-box;
    text-align: center;
  }
  .success-img{
    width: 90px;
    height: 90px;
  }
  .tip3{
    padding-top: 30px;
    font-size:60px;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:84px;
  }
  .tip4{
    padding: 10px 0 50px;
    font-size:30px;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:42px;
  }
  .list{
    padding-top: 59px;
    border-top: 2px dashed #DDDDDD;
  }
  .list li{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    height:42px;
    font-size:30px;
    color:rgba(102,102,102,1);
    line-height:42px;
  }
</style>
